<template>
  <PageContainer>
    <view class="container bgf">
      <Header title="跟进记录" />
      <view class="py-13 px-16 fz-16 linh-24 font-bold">已有 {{ total }} 个跟进记录</view>
      <view class="p-16">
        <Paglist
          v-model="dataList"
          :is-init-api="false"
          :parame="parame"
          @register="register"
          :scroll-top-bottom="260"
          empty-text="暂无跟进记录"
          :is-show-loadmore="dataList.length >= 1"
        >
          <template v-for="v in dataList" :key="v.id">
            <view class="list-item">
              <Timeline :data="v" @edit="handleEdit(v)" @del="handleDel(v)"></Timeline>
            </view>
          </template>
        </Paglist>
      </view>
    </view>
    <TButtonGroup
      :styles="{
        backgroundColor: '#fff',
        display: 'block',
      }"
    >
      <TButton
        text="添加跟进记录"
        type="none"
        :customStyle="{
          backgroundColor: '#2878FF',
          color: '#FFFFFF',
        }"
        custom-class="h-44 linh-44 br-22"
        @click="toAdd"
      />
    </TButtonGroup>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* followUpRecords 跟进记录 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Timeline from './components/Timeline.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, ref } from 'vue';
  import { boFollowList, delBoFollow } from '@/api/businessOpportunities';
  import type { IFollowRecord } from '@/api/businessOpportunities/type';
  import type { IQuery } from '@/api/indexTypes';
  import { navigateTo, onLoad } from '@/router';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { Toast } from '@/utils';

  onLoad<'followUpRecords'>((op) => {
    parame.value.boInfoId = op.boInfoId;
    refresh();
  });
  const total = ref(0);
  const [register, { refresh }] = useConList();
  const parame = ref<{ boInfoId: number } & IQuery>({
    current: 1,
    size: 10,
    boInfoId: 0,
  });
  provide('api', async (obj: { boInfoId: number } & IQuery) => {
    const res = await boFollowList(obj);
    total.value = res.total;
    return res;
  });
  const dataList = ref<IFollowRecord[]>([]);

  const handleEdit = (v: IFollowRecord) => {
    navigateTo({
      name: 'addFollowUpRecords',
      options: {
        data: v,
        successFn: () => {
          refresh();
        },
      },
    });
  };

  const handleDel = (v: IFollowRecord) => {
    uni.showModal({
      title: '删除跟进记录',
      content: '确定要删除您添加的本条跟进记录吗？',
      cancelColor: '#969799',
      cancelText: '取消',
      confirmColor: '#2878FF',
      confirmText: '立即删除',
      success: async (res) => {
        if (res.confirm) {
          await delBoFollow(v.id);
          refresh();
          Toast('删除成功！');
        }
      },
    });
  };
  const toAdd = () => {
    navigateTo({
      name: 'addFollowUpRecords',
      options: {
        data: {
          boInfoId: parame.value.boInfoId,
          screenshotPathsList: [],
          attachmentPathsList: [],
        },
        successFn: () => {
          refresh();
        },
      },
    });
  };
</script>

<style lang="scss" scoped>

</style>
